<template>
    <div class="notes">
        <div class="upload_img"  v-for="(item,index) in uploadForm">
            <!-- :class="index ? 'close' : ''" -->
            <!-- <span class="close-button" v-if="index" @click="closeItem(index)">
                <i class="el-icon-close"></i>
            </span> -->
            <el-form ref="form" :model="form" :rules="rules" label-width="55px" style="margin-top: 10px">
                <el-form-item style="font-size: 14px;font-family: MicrosoftYaHei;color: #999999;">图片{{item.picnum + 1}}
                </el-form-item>
                <el-form-item label="内容" :rules="rules1">
                    <el-input type="textarea" v-model="item.desc"></el-input>
                    <!-- <el-button @click="addForm" class="add" v-if="!index">增加</el-button> -->
                </el-form-item>
                <el-form-item label="图片" prop="imageId" :rules="rules1">
                    <upload-file :picnum="item.picnum" @remove="removePic" @success="uploadSuccess" :limit="piclimit">
                    </upload-file>
                </el-form-item>
                <p class="upload_text">仅可上传一个文件（视频/音频），视频仅支持MP4，音频仅支持MP3，音/视频大小不得超过2G.</p>
            </el-form>
        </div>
    </div>
</template>

<script>
/**
* description: 便利贴模块
*/
import uploadFile from '../upload/upload.vue'
let PICNUM = 0;
export default {
    components: {
        uploadFile,
    },
    data() {
        return {
            piclimit: 1,
            form: {},
            rules: {},
            uploadForm: [
                {
                    picnum: 0, //一个页面可能会有几个upload组件，需要编号
                    piccontent: [],
                    desc: ''
                },
                {
                    picnum: 1, //一个页面可能会有几个upload组件，需要编号
                    piccontent: [],
                    desc: ''
                },
                {
                    picnum: 2, //一个页面可能会有几个upload组件，需要编号
                    piccontent: [],
                    desc: ''
                }
            ],
            rules1: [
                { required: true, message: '内容不能为空' },
                { type: 'string', message: '' }
            ],
        }
    },
    methods: {
        removePic(picnum, file, fileList) {
            this.uploadForm.forEach((item) => {
                item.picnum === picnum ? item.piccontent = fileList : ''
            })
        },
        // closeItem(index) {
        //     this.uploadForm.splice(index, 1)
        // },
        uploadSuccess(picnum, file, fileList) {
            this.uploadForm.forEach((item) => {
                item.picnum === picnum ? item.piccontent = fileList : ''
            })
        },
        submit() {
            return { formData: this.uploadForm}
        },
        addForm() {
            this.uploadForm.push({
                picnum: ++PICNUM,
                piccontent: [],
                desc: ''
            });
            console.log(this.uploadForm)
        }
    }
}
</script>

<style lang="scss" scoped>
.notes {
    position: relative;
    margin-left: 44px;
    padding-bottom: 10px;
}

.avatar-uploader {
    display: inline-block;
    vertical-align: top;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    background: #FFFFFF;
    border: 1px dashed #CBCED4;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

// .close-button {
//     position: absolute;
//     width: 16px;
//     height: 16px;
//     font-size: 12px;
//     border: 1px solid #ccc;
//     right: 10px;
//     top: 10px;
//     cursor: pointer;
// }
.upload_img {
    position: relative;
}

// .close {
//     width: 668px;
//     margin-left: -17px;
//     padding-left: 17px;
//     border: 1px dotted #ccc;
// }

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.upload_text {
    font-size: 12px;
    font-family: MicrosoftYaHei;
    color: #999999;
    line-height: 16px;
    margin: -8px 0 28px 54px;

}

::v-deep .el-textarea {
    width: 555px;
}

.add {
    width: 60px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid #00B3A8;
    margin-left: 20px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #00B3A8;
    position: absolute;
    bottom: 0;
}
</style>